import React ,{Suspense,FC} from 'react'
import routes from "./router_config"
import {BrowserRouter,Route,Routes,Navigate} from "react-router-dom"
import {RouterList,RouterItem} from "../utils/index"

type Props = {
  message?:string
}

const Router_view :FC<Props>= () => {
  const renderRouter = (arr:RouterList) =>{
    return arr.map((item:RouterItem,index:number)=>{
      return <Route key={index} path={item.path} element={
        // item.element?<item.element/>:<Navigate to={item.to as string}/>
        item.to? <Navigate to={item.to}/>:<item.element/>
      }>
        {
          item.children && renderRouter(item.children)
        }
      </Route>
    })
  }
  return (
    <Suspense fallback={<>路由加载中...</>}>
      <BrowserRouter>
        <Routes>
          {
            renderRouter(routes)
          }
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}

export default Router_view